<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!--
            v-bind是单向绑定，修改data值可以使得表单值改变，但修改表单值不会影响data值
            v-bind可以用在各种标签属性，v-bind:value可简写为:value
            v-model是双向绑定，修改data值可以使得表单值改变，修改表单值也会修改data值
            v-model只能用在表单标签上（有value属性），v-model:value可简写为v-model
        -->
        单向数据绑定：<input type="text" v-bind:value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name"><br>
    </div>
    <script>
        Vue.config.productionTip = false

        new Vue({
            el: "#root", 
            data: { 
                name: "sgg"
            }
        })
    </script>
</body>
</html>